<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13_XHR-文件上传的接口演练</title>
</head>
<body>

  <input class="file" type="file">
  <button class="upload">上传文件</button>

  <script>
    const uploadBtn = document.querySelector('.upload')
    uploadBtn.onclick = function () {
      const xhr = new XMLHttpRequest()

      xhr.responseType = 'json'
      xhr.open("post", "http://123.207.32.32:1888/02_param/upload")

      const file = document.querySelector('.file').files[0]

      const formData = new FormData()
      formData.append('avatar', file)

      xhr.send(formData)

      xhr.onload = function () {
        console.log(xhr.response)
      }

      xhr.onprogress = function (e) {
        console.log(e)
      }
    }


  </script>
  
</body>
</html>